---
id: 612e89d254fe5d3df7d6693d
title: Passo 10
challengeType: 0
dashedName: step-10
---

# --description--

Agora que você redefiniu o box model do `html`, é preciso passar isso para os elementos internos também. Para fazer isso, você pode definir a propriedade `box-sizing` como `inherit`, o que dirá aos elementos de destino que usemo mesmo valor que o elemento pai.

Você também precisará apontar para os pseudoelementos, que são palavras-chave especiais que seguem um seletor. Os dois pseudoelementos que você usará são `::before` e `::after`.

`::before` cria um pseudoelemento que é o primeiro filho do elemento selecionado, enquanto `::after` cria um pseudoelemento que é o último filho do elemento selecionado. Esses pseudoelementos são muitas vezes usados para criar conteúdo estético, algo que você verá mais tarde neste projeto.

Por enquanto, crie um seletor de CSS que aponte para todos os elementos usando `*` e inclua os pseudoelementos com `::before` e `::after`. Defina a propriedade `box-sizing` para `inherit`.

# --hints--

Você deve ter um seletor `*, ::before, ::after`.

```js
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
```

O seletor `*, ::before, ::after` deve ter a propriedade `box-sizing` definida como `inherit`.

```js
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div id="piano">
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>
```

```css
--fcc-editable-region--
html {
  box-sizing: border-box;
}
--fcc-editable-region--
```
